<template>
  <div class="share-item van-hairline--bottom" @click="toDetail">
    <div class="title van-multi-ellipsis--l2">
      {{ itemData.title }}
    </div>
    <div class="content ">
      {{ itemData.content }}
    </div>
    <div class="info-box">
      <div class="userinfo">
        <img :src="itemData.author.avatar | addBaseUrl" alt="" />
        <span>{{ itemData.author.nickname }}</span>
      </div>
      <div class="time">{{ itemData.created_at | formatTime }}</div>
      <div class="mes">
        <i class="iconfont iconicon_pinglunliang"></i>
        <span>{{ itemData.article_comments }}</span>
      </div>
      <div class="zan">
        <i class="iconfont iconbtn_dianzan_small_nor actived"></i>
        <span>{{ itemData.star }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mm-share-item',
  props: ['itemData'],
  methods: {
    toDetail () {
      const { id } = this.itemData
      this.$router.replace(`/shareDetail/${id}`)
    }
  }
}
</script>

<style lang="less">
.share-item {
  padding-top: 16px;
  padding-bottom: 28px;
  .title {
    font-size: 16px;
    color: @main-font-color;
    margin-bottom: 12px;
  }
  .content {
    color: @subdominant-font-color;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .info-box {
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: @minor-font-color;
    .userinfo {
      flex: 1;
      display: flex;
      align-items: center;
    }
    img {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .time {
      margin-right: 21px;
    }
    .mes {
      margin-right: 23px;
    }
    .iconfont {
      margin-right: 7px;
    }
    .mes,
    .zan {
      display: flex;
      align-items: center;
    }
  }
  .iconfont.actived {
    color: @main-color;
  }
}
</style>
